import React,{useState} from 'react'
import { useNavigate ,useLocation ,useParams } from 'react-router-dom';
import { Toast, NavBar ,Swiper,Popup ,Button} from 'react-vant';
import { PROPSTYPE } from '../Type/Store.d';

function Reading() {
    const Navigate = useNavigate();
    const Location = useLocation();
    const Params = useParams();
    console.log(Location.state);
    let obj = Location.state as PROPSTYPE;
    let objCon = obj.sumcon as PROPSTYPE[];
    const [state, setState] = useState('');
    const onClose = () => setState('');

    const [black,setBlack] = useState(false);
    const [red,setRed] = useState(false);
    const [green,setGreen] = useState(false);
    const [orange,setOrange] = useState(false);

    return (
        <div className='Reading' style={{background:black ? '#fff' : red ? 'red' : green ?'green': orange ? 'orange' :''}}>
            <NavBar
                title="阅读详情"
                leftText="返回"
                // rightText="按钮"
                onClickLeft={() => Navigate(-1)}
                // onClickRight={() => Toast('按钮')}
            />
            <div className="demo-swiper">
                <Swiper autoplay={2000} loop={true} indicator={(total, current) => (
                    <div className="custom-indicator">
                        {current + 1}/{total}
                    </div>
                )}>
                    {
                        objCon.map((item,index)=>{
                            return <Swiper.Item key={index} onClick={() => setState('bottom')}>
                                <p>&emsp;&emsp;{item as string}</p>
                            </Swiper.Item>
                        })
                    }
                    
                </Swiper>
            </div>
            <Popup
                visible={state === 'bottom'}
                style={{ height: '30%' }}
                position="bottom"
                onClose={onClose}
            >
                <Button type="primary" size="small" onClick={()=>{
                    setBlack(true);
                    setRed(false);
                    setGreen(false);
                    setOrange(false);
                    setState('')
                }}>默认</Button>&emsp;
                <Button type="info" size="small" onClick={()=>{
                    setBlack(false);
                    setRed(false);
                    setGreen(true);
                    setOrange(false);
                    setState('')
                }}>绿色</Button>&emsp;
                <Button type="warning" size="small" onClick={()=>{
                    setBlack(false);
                    setRed(false);
                    setGreen(false);
                    setOrange(true);
                    setState('')
                }}>橙色</Button>&emsp;
                <Button type="danger" size="small" onClick={()=>{
                    setBlack(false);
                    setRed(true);
                    setGreen(false);
                    setOrange(false);
                    setState('')
                }}>红色</Button>
            </Popup>
        </div>
    )
}

export default Reading